<template>
  <div class="selector-input">
    <label class="placeholder">{{ placeholder }}</label>
    <input
      class="input"
      type="text"
      ref="inputValue"
      :value="inputValue"
      @input="searchOptions($event)"
      @focus="searchOptions($event)"
      @blur="setValue(inputValue)"
    />
    <span class="iconfont icon-xiajiantou"></span>
  </div>
</template>
<script>
export default {
  name: "SelectorInput",
  props: {
    placeholder: {
      type: String,
      default: "请选择...",
    },
    inputValue: String,
  },
  methods: {
    searchOptions(e) {
      this.$emit("searchOptions", e.target.value);
    },
    setValue(value) {
      const _input = this.$refs.inputValue;

      if (_input.value.length > 0) {
        _input.value = value;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3061883 */
  src: url("//at.alicdn.com/t/font_3061883_l57yfjiolt.woff2?t=1641128796102")
      format("woff2"),
    url("//at.alicdn.com/t/font_3061883_l57yfjiolt.woff?t=1641128796102")
      format("woff"),
    url("//at.alicdn.com/t/font_3061883_l57yfjiolt.ttf?t=1641128796102")
      format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sousuo:before {
  content: "\eafe";
}

.icon-xiajiantou:before {
  content: "\e63c";
}

.icon-shoucang:before {
  content: "\e600";
}

.selector-input {
  position: relative;
  width: 100%;
  height: 38px;

  .input {
    width: 100%;
    height: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    outline: none;
    transition: all 0.2s linear;

    &:focus {
      border-color: #1890ff;
      box-shadow: 0 0 3px #1890ff;
    }
  }

  .placeholder,
  .iconfont {
    position: absolute;
  }

  .placeholder {
    left: 15px;
    top: 8px;
    color: #999;
  }

  .iconfont {
    right: 15px;
    top: 12px;
    color: #999;

    &.icon-search {
      font-size: 22px;
      top: 8px;
    }
  }
}
</style>
